<template>
    <div class="box">
        <div :class="index==0?'splitTop' : 'splitBottom'" v-for="(item,index) in splitData" :key="index">
            <div class="mask"></div>
            <h1>{{item.title}}</h1>
            <a href="#" class="btn">{{item.name}}</a>
        </div>
    </div>
  </template>
  
  <script setup>
    import {split}  from '@/config/index'
    import { ref } from 'vue';
    const splitData = ref(split);
  </script>
  <style scoped>
  .box{
    height: 100%;
    display: flex;
  }
  .splitTop,.splitBottom{
    width: 100%;
    height: 100%;
    flex: 1;
    background-size:cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 30px;
    position: relative;
    color: #fff;
    transition: all 2s;
  }
  .splitTop{
    background-image: url('./image/ps.jpg');
  }
  .splitBottom{
    background-image: url('./image/xbox.jpg');
  }
  .mask{
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .splitTop .mask{
    background-color:rgba(87, 84, 236, 0.7);
    
  }
  .splitBottom .mask{
    background-color:rgba(43, 43, 43, 0.8);
  }
  .btn{
    text-decoration: none;
    color: #fff;
    border: 3px solid #fff;
    padding: 15px 60px;
    font-size: 20px;
    z-index: 99999;
  }
  h1{
    z-index: 99999;
  }
  .splitTop .btn:hover{
    background-color:rgb(87, 84, 236);
    border: 3px solid rgb(87, 84, 236);
  }
  .splitBottom .btn:hover{
    background-color:rgb(28, 122, 28);
    border: 3px solid rgb(28, 122, 28);
  }
  .splitTop:hover{
    flex: 3;
  }
  .splitBottom:hover{
    flex: 3;
  }
  </style>